<template>
	<view class="m-switch" :class="[{open: status==1}, {close: status==2}, {stop: status==0}, {three: type==2}]">
		<view class="swith">
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"m-switch",
		data() {
			return {
				
			};
		},
		props: {
			// 1开 2关 0停
			status: {
				type: String|Number,
				default: 1
			},
			// 1开关两种状态 2开关停三种状态
			type: {
				type: String|Number,
				default: 1
			}
		}
	}
</script>

<style lang="scss">
	.m-switch{
		position: relative;
		.swith{
			width: 34rpx;
			height: 68rpx;
			box-sizing: border-box;
			border-radius: 34rpx;
			border: 1rpx solid #29CC80;
			padding: 4rpx 3rpx;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			background: rgba(41, 204, 128, 0.1);
			transition: all .3s;
			&::after{
				content: ' ';
				display: block;
				width: 28rpx;
				height: 28rpx;
				border-radius: 50%;
				background: #29CC80;
				box-shadow: 0px -2px 9px 0px rgba(41, 204, 128, 0.5);
				transition: all .3s;
			}
			&::before{
				content: '开';
				display: block;
				font-size: 24rpx;
				color: #29CC80;
				position: absolute;
				right: calc(100% + 5rpx);
				transition: all .3s;
			}
			
		}
		&.three .swith{
			height: 105rpx;
		}
		&.open .swith{
			border: 1rpx solid #29CC80;
			background: rgba(41, 204, 128, 0.1);
			align-items: flex-end;
			&::after{
				box-shadow: 0px -2px 9px 0px rgba(41, 204, 128, 0.5);
				background: #29CC80;
			}
			&::before{
				content: '开';
				color: #29CC80;
			}
		}
		&.close .swith{
			border: 1rpx solid #FF5858;
			background: #FFEFEF;
			align-items: flex-start;
			&::after{
				box-shadow: 0px -2px 9px 0px rgba(#FF5858, 0.5);
				background: #FF5858;
			}
			&::before{
				content: '关';
				color: #FF5858;
			}
		}
		&.stop .swith{
			border: 1rpx solid #D1D1D1;
			background: #F0F0F0;
			align-items: center;
			&::after{
				box-shadow: 0px -2px 9px 0px rgba(#D1D1D1, 0.5);
				background: #D1D1D1;
			}
			&::before{
				content: '停';
				color: #D1D1D1;
			}
		}
	}
</style>
